<template>
    <div class="leafer-wb-operate">
        <a-button type="text">
            <template #icon>
                <div class="i-svg t-svg">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M15 8.4C13.7297 8.4 12.7 9.42975 12.7 10.7V12.7H20C21.1046 12.7 22 13.5954 22 14.7V20.7C22 21.8046 21.1046 22.7 20 22.7H10C8.89543 22.7 8 21.8046 8 20.7V14.7C8 13.5954 8.89543 12.7 10 12.7H11.3V10.7C11.3 8.65655 12.9565 7 15 7C17.0435 7 18.7 8.65655 18.7 10.7H17.3C17.3 9.42975 16.2703 8.4 15 8.4ZM10 14.1C9.66863 14.1 9.4 14.3686 9.4 14.7V20.7C9.4 21.0314 9.66863 21.3 10 21.3H20C20.3314 21.3 20.6 21.0314 20.6 20.7V14.7C20.6 14.3686 20.3314 14.1 20 14.1H10ZM15.7 16.7C15.7 16.3134 15.3866 16 15 16C14.6134 16 14.3 16.3134 14.3 16.7V18.7C14.3 19.0866 14.6134 19.4 15 19.4C15.3866 19.4 15.7 19.0866 15.7 18.7V16.7Z"
                              fill="inherit"></path>
                    </svg>
                </div>
            </template>
        </a-button>
        <a-divider direction="vertical"/>
        <!-- 操作开始 -->
        <a-radio-group default-value="1" size="small">
            <a-radio value="1">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="选择">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M14.1398 15.3082L17.5124 21.1497L18.5516 20.5497L15.179 14.7082L17.3645 13.4465L11.3283 9.46108L11.7617 16.6812L14.1398 15.3082ZM11.9012 18.2173C11.2574 18.5889 10.4475 18.1532 10.403 17.4111L9.88292 8.7464C9.83355 7.92383 10.7444 7.39793 11.4321 7.85197L18.676 12.6348C19.2963 13.0443 19.2688 13.9636 18.625 14.3353L17.0914 15.2207L20.464 21.0622L16.9999 23.0622L13.6273 17.2207L11.9012 18.2173Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="2">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="矩形">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M20 9.4H10C9.66863 9.4 9.4 9.66863 9.4 10V20C9.4 20.3314 9.66863 20.6 10 20.6H20C20.3314 20.6 20.6 20.3314 20.6 20V10C20.6 9.66863 20.3314 9.4 20 9.4ZM10 8C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8H10Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="3">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="菱形">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M21.0811 15.061L15.4243 9.40416C15.1899 9.16985 14.8101 9.16985 14.5757 9.40416L8.91888 15.061C8.68457 15.2953 8.68457 15.6752 8.91888 15.9095L14.5757 21.5664C14.81 21.8007 15.19 21.8007 15.4243 21.5664L21.0811 15.9095C21.3154 15.6752 21.3154 15.2953 21.0811 15.061ZM16.4142 8.41421C15.6332 7.63317 14.3668 7.63317 13.5858 8.41421L7.92893 14.0711C7.14788 14.8521 7.14788 16.1184 7.92893 16.8995L13.5858 22.5563C14.3668 23.3374 15.6332 23.3374 16.4142 22.5563L22.0711 16.8995C22.8521 16.1184 22.8521 14.8521 22.0711 14.0711L16.4142 8.41421Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="4">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="椭圆">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M8.4 15C8.4 18.6451 11.3549 21.6 15 21.6C18.6451 21.6 21.6 18.6451 21.6 15C21.6 11.3549 18.6451 8.4 15 8.4C11.3549 8.4 8.4 11.3549 8.4 15ZM15 7C10.5817 7 7 10.5817 7 15C7 19.4183 10.5817 23 15 23C19.4183 23 23 19.4183 23 15C23 10.5817 19.4183 7 15 7Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="5">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="箭头">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M18 16V17.9597C18 18.3789 18.485 18.612 18.8123 18.3501L22.512 15.3904C22.7622 15.1903 22.7622 14.8097 22.512 14.6096L18.8123 11.6499C18.485 11.388 18 11.6211 18 12.0403V14H7V16H18Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="6">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="直线">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M23 16H7V14H23V16Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="7">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="自由书写">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M8.93957 21.063L8.9025 19.0774L15.4237 12.5562L17.4438 14.5763L10.9163 21.1038L8.93957 21.063ZM18.4337 13.5864L20.5958 11.4243C20.8301 11.19 20.8301 10.8101 20.5958 10.5757L19.4242 9.40417C19.1899 9.16985 18.81 9.16985 18.5757 9.40417L16.4136 11.5663L18.4337 13.5864ZM7.49956 18.9335L7.54699 21.4737C7.55702 22.0106 7.98933 22.4438 8.52623 22.4548L11.058 22.507C11.3303 22.5126 11.5931 22.4069 11.7857 22.2143L21.5858 12.4142C22.3668 11.6332 22.3668 10.3668 21.5858 9.58579L20.4142 8.41422C19.6331 7.63317 18.3668 7.63317 17.5858 8.41422L7.79228 18.2077C7.60017 18.3998 7.49449 18.6618 7.49956 18.9335Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="8">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="格式刷">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M18 8.4H10C9.66863 8.4 9.4 8.66863 9.4 9V11C9.4 11.3314 9.66863 11.6 10 11.6H18C18.3314 11.6 18.6 11.3314 18.6 11V9C18.6 8.66863 18.3314 8.4 18 8.4ZM10 7C8.89543 7 8 7.89543 8 9V11C8 12.1046 8.89543 13 10 13H18C19.1046 13 20 12.1046 20 11V10.7H20.5C20.6657 10.7 20.8 10.8343 20.8 11V14C20.8 14.1657 20.6657 14.3 20.5 14.3H16C15.0612 14.3 14.3 15.0611 14.3 16V17H14.1C13.7686 17 13.5 17.2686 13.5 17.6V22.4C13.5 22.7314 13.7686 23 14.1 23H15.9C16.2314 23 16.5 22.7314 16.5 22.4V17.6C16.5 17.2686 16.2314 17 15.9 17H15.7V16C15.7 15.8343 15.8344 15.7 16 15.7H20.5C21.4389 15.7 22.2 14.9389 22.2 14V11C22.2 10.0611 21.4389 9.29999 20.5 9.29999H20V9C20 7.89543 19.1046 7 18 7H10Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="9">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="文字">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.5 22C7.22386 22 7 21.7761 7 21.5V21.4372C7 21.1611 7.22386 20.9372 7.5 20.9372H8.4677L13.8779 8.30317C13.9567 8.11926 14.1375 8 14.3376 8H15.6423C15.8421 8 16.0227 8.11897 16.1016 8.30255L21.5323 20.9372H22.5C22.7761 20.9372 23 21.1611 23 21.4372V21.5C23 21.7761 22.7761 22 22.5 22L17.5 22C17.2239 22 17 21.7761 17 21.5V21.4372C17 21.1611 17.2239 20.9372 17.5 20.9372L19.1757 20.9372L14.2351 9.30803H14.9793L10.0181 20.9372L11.5 20.9372C11.7761 20.9372 12 21.1611 12 21.4372V21.5C12 21.7761 11.7761 22 11.5 22L7.5 22ZM11.0517 17.6263V16.4H18.1835V17.6263H11.0517Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
            <a-radio value="12">
                <template #radio="{ checked }">
                    <div class="item" :class="checked ? 'active' : ''" title="橡皮">
                        <div class="i-svg t-svg">
                            <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M13.4335 19.6L17.7889 15.3848L13.4675 11.0634L8.77227 15.7586C8.54164 15.9892 8.53749 16.3619 8.76291 16.5976L11.6342 19.6L13.4335 19.6ZM14.4575 10.0734L18.7951 14.411L20.2283 13.024C20.4692 12.7908 20.4723 12.4056 20.2353 12.1685L16.7231 8.65633C16.4888 8.42202 16.1089 8.42202 15.8746 8.65633L14.4575 10.0734ZM15.0333 20L21.2019 14.03C22.0048 13.2529 22.0153 11.9687 21.2252 11.1786L17.713 7.66638C16.932 6.88533 15.6657 6.88533 14.8846 7.66638L7.78232 14.7687C7.01357 15.5374 6.99971 16.7795 7.75111 17.5652L11.0359 21L11.5 21H23V20H15.0333Z"
                                      fill="inherit"></path>
                            </svg>
                        </div>
                    </div>
                </template>
            </a-radio>
        </a-radio-group>
        <a-divider direction="vertical"/>
        <a-button-group type="text">
            <a-button>
                <template #icon>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M9 8.4H21C21.3314 8.4 21.6 8.66863 21.6 9V17.685L19.4511 14.9989C19.0043 14.4404 18.1713 14.3943 17.6656 14.9L15.058 17.5076L12.34 14.11C11.8932 13.5516 11.0602 13.5054 10.5545 14.0112L8.4 16.1656V9C8.4 8.66863 8.66863 8.4 9 8.4ZM11.3864 15.1591L14.062 18.5036L10.9656 21.6H9C8.66863 21.6 8.4 21.3314 8.4 21V18.1455L11.3864 15.1591ZM12.9455 21.6H21C21.3314 21.6 21.6 21.3314 21.6 21V19.8533L21.5645 19.8817L18.4975 16.048L12.9455 21.6ZM7 9C7 7.89543 7.89543 7 9 7H21C22.1046 7 23 7.89543 23 9V21C23 22.1046 22.1046 23 21 23H9C7.89543 23 7 22.1046 7 21V9ZM18.1112 12.3333C18.8475 12.3333 19.4445 11.7364 19.4445 11C19.4445 10.2636 18.8475 9.66666 18.1112 9.66666C17.3748 9.66666 16.7778 10.2636 16.7778 11C16.7778 11.7364 17.3748 12.3333 18.1112 12.3333Z"
                              fill="inherit"></path>
                    </svg>
                </template>
            </a-button>
            <a-button>
                <template #icon>
                    <svg width="30" height="30" viewBox="-300 -280 1600 1600" fill="inherit"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M918.108083 65.290421l0 649.762581-243.667609 243.656241L105.891518 958.709243 105.891518 728.798611l0-13.745688 0-81.225057 0-154.834174L105.891518 65.290421l348.144982 0 139.191532 0 81.212378 0 73.785413 0L918.108083 65.290421zM803.2682 715.050444l-128.827711 0 0 128.808796L803.2682 715.050444zM836.895641 633.827945 836.895641 146.512952 187.102648 146.512952l0 730.973712 406.124152 0L593.2268 633.827945 836.895641 633.827945 836.895641 633.827945z"
                              fill="inherit"></path>
                    </svg>
                </template>
            </a-button>
        </a-button-group>
        <a-divider direction="vertical"/>
        <!-- 操作完成 -->
        <div data-v-4e89a366="" data-v-5121d6d3="" class="vertical-separator">
            <hr data-v-4e89a366="">
        </div>
        <a-dropdown>
            <a-button type="text">
                <template #icon>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="inherit"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                              d="M12.7 8.7C12.7 8.53431 12.8343 8.4 13 8.4H17.5C17.6657 8.4 17.8 8.53431 17.8 8.7V9.5H12.7V8.7ZM11.3 9.5V8.7C11.3 7.76112 12.0611 7 13 7H17.5C18.4389 7 19.2 7.76112 19.2 8.7V9.5H19.5C20.4389 9.5 21.2 10.2611 21.2 11.2V12.2H21C22.1046 12.2 23 13.0954 23 14.2V21.2C23 22.3046 22.1046 23.2 21 23.2H9C7.89543 23.2 7 22.3046 7 21.2V14.2C7 13.0954 7.89543 12.2 9 12.2H9.3V11.2C9.3 10.2611 10.0611 9.5 11 9.5H11.3ZM11 10.9C10.8343 10.9 10.7 11.0343 10.7 11.2V12.2H19.8V11.2C19.8 11.0343 19.6657 10.9 19.5 10.9H11ZM9 13.6H21C21.3314 13.6 21.6 13.8686 21.6 14.2V21.2C21.6 21.5314 21.3314 21.8 21 21.8H9C8.66863 21.8 8.4 21.5314 8.4 21.2V14.2C8.4 13.8686 8.66863 13.6 9 13.6ZM14.5828 15.0008C13.7829 14.5564 12.8 15.1348 12.8 16.0498V19.3502C12.8 20.2652 13.7829 20.8436 14.5828 20.3992L17.5532 18.749C18.3762 18.2918 18.3762 17.1082 17.5532 16.651L14.5828 15.0008ZM16.5586 17.7L14.2 19.0103V16.3897L16.5586 17.7Z"
                              fill="inherit"></path>
                    </svg>
                </template>
            </a-button>
            <template #content>
                <a-doption>
                    <template #icon>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 6.42L10 8.9L17 6.42L10 4L3 6.42Z" stroke="currentColor"
                                  stroke-width="1.4" stroke-linejoin="round"></path>
                            <path d="M3 10.25L10 12.7L17 10.25" stroke="currentColor" stroke-width="1.4"
                                  stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M3 14.05L10 16.5L17 14.05" stroke="currentColor" stroke-width="1.4"
                                  stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </template>
                    素材库
                </a-doption>
                <a-doption>
                    <template #icon>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <rect x="2.7" y="2.7" width="14.6" height="14.6" rx="7.3" stroke="currentColor"
                                  stroke-width="1.4"></rect>
                            <path d="M12.25 7.75347C12.25 8.0523 12.3687 8.3389 12.58 8.5502C12.7913 8.76151 13.0779 8.88022 13.3768 8.88022C13.6756 8.88022 13.9622 8.76151 14.1735 8.5502C14.3848 8.3389 14.5035 8.0523 14.5035 7.75347C14.5035 7.45463 14.3848 7.16804 14.1735 6.95673C13.9622 6.74542 13.6756 6.62671 13.3768 6.62671C13.0779 6.62671 12.7913 6.74542 12.58 6.95673C12.3687 7.16804 12.25 7.45463 12.25 7.75347Z"
                                  fill="currentColor"></path>
                            <path d="M5.5 7.75347C5.5 8.0523 5.61871 8.3389 5.83002 8.5502C6.04133 8.76151 6.32792 8.88022 6.62676 8.88022C6.92559 8.88022 7.21219 8.76151 7.4235 8.5502C7.6348 8.3389 7.75352 8.0523 7.75352 7.75347C7.75352 7.45463 7.6348 7.16804 7.4235 6.95673C7.21219 6.74542 6.92559 6.62671 6.62676 6.62671C6.32792 6.62671 6.04133 6.74542 5.83002 6.95673C5.61871 7.16804 5.5 7.45463 5.5 7.75347Z"
                                  fill="currentColor"></path>
                            <path d="M6.27089 11.7053H13.7303C13.4017 13.4664 11.8563 14.8 10 14.8C8.14321 14.8 6.59802 13.4673 6.27089 11.7053Z"
                                  stroke="currentColor" stroke-width="1.4"></path>
                        </svg>
                    </template>
                    图标
                </a-doption>
                <a-doption>
                    <template #icon>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 17C13.866 17 17 13.866 17 10C17 10 13.325 11.05 11.05 8.6C8.775 6.15 10 3 10 3C6.134 3 3 6.134 3 10C3 13.866 6.134 17 10 17Z"
                                  stroke="currentColor" stroke-width="1.4" stroke-linecap="round"
                                  stroke-linejoin="round"></path>
                            <path d="M17 10L10 3" stroke="currentColor" stroke-width="1.4"
                                  stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </template>
                    贴纸库
                </a-doption>
                <a-doption>
                    <template #icon>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <mask id="path-1-inside-1_2564_9530" fill="white">
                                <rect x="3" y="3" width="7" height="14" rx="1"></rect>
                            </mask>
                            <rect x="3" y="3" width="7" height="14" rx="1" stroke="currentColor"
                                  stroke-width="2.8" mask="url(#path-1-inside-1_2564_9530)"></rect>
                            <mask id="path-2-inside-2_2564_9530" fill="white">
                                <rect x="11" y="3" width="6" height="6" rx="1"></rect>
                            </mask>
                            <rect x="11" y="3" width="6" height="6" rx="1" stroke="currentColor"
                                  stroke-width="2.8" mask="url(#path-2-inside-2_2564_9530)"></rect>
                            <mask id="path-3-inside-3_2564_9530" fill="white">
                                <rect width="6" height="7" rx="1"></rect>
                            </mask>
                            <rect width="6" height="7" rx="1" transform="matrix(1 0 0 -1 11 17)"
                                  stroke="currentColor" stroke-width="2.8"
                                  mask="url(#path-3-inside-3_2564_9530)"></rect>
                        </svg>
                    </template>
                    模板
                </a-doption>
            </template>
        </a-dropdown>
    </div>
</template>
<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
    name: 'leafer-wb-operate',
    data: () => ({})
});
</script>
<style scoped lang="less">
.leafer-wb-operate {
    position: absolute;
    top: 14px;
    left: 120px;
    display: flex;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: 1px solid var(--color-neutral-3);
    padding: 7px;

    .arco-divider {
        height: 32px;
    }
    .arco-radio-group {
        height: 30px;
    }

    .item {
        display: inline-block;
        border-radius: 6px;
        cursor: pointer;
        height: 30px;
        .i-svg {
            height: 30px;
        }

        &:hover {
            background: #e2e1fc;
        }

        &.active {
            background: #6965db;
            fill: #fff;
        }
    }

    .arco-radio-group .arco-radio {
        margin-right: 0;
    }
}
</style>
